import React, { FC, useEffect, useState } from 'react'
import { Button, Drawer, List } from 'antd'
import { getTableList } from '@/services/proTable'
import ProCard from '@ant-design/pro-card'

interface TableListProps {
  dbId:string,
  visible:boolean,
  onClose:any,
}

const TableList: FC<TableListProps> = (props) => {

  const { dbId, visible,onClose} = props;
  const [tableList,setTableList] = useState<any>([]);

  useEffect(() => {
    if (visible) {
      getTableList({database_id:dbId}).then(res =>{
        if (res.code === 10000) {
          setTableList(res.data || [])
        }
      })
    }
  },[visible])


  return (
    <Drawer
      title="Table列表"
      width={500}
      onClose={() => onClose(false)}
      visible={visible}
      bodyStyle={{ paddingBottom: 80, backgroundColor: '#f0f2f5' }}
      footer={
        <div
          style={{
            textAlign: 'right'
          }}
        >
          <Button onClick={() => onClose(false)} type="primary">
            关闭
          </Button>
        </div>
      }>
      <ProCard>
        <List
          dataSource={tableList}
          renderItem={(item:any) => <List.Item>{`${item.name}${item.comment ? '          ' + item.comment : ''}`}</List.Item>}
        />
      </ProCard>
    </Drawer>
  )
}

export default TableList
